<template>
	<view class="index_wrap" v-if="isShowThree">
		<view class="index_btom">
			<!-- 小区内消息设置 -->
			<view class="index_resi_quar">
				<view class="index_resi_quar_box"></view>
				<view class="index_resi_quar_cont">
					<view class="index_resi_quar_cont_title" style="display: flex; align-items: center">
						<image style="
								width: 40rpx;
								height: 40rpx;
								margin-right: 20rpx;
								margin-top: -4rpx;
								margin-left: 26rpx;
							" src="../../static/image/loufang.png"></image>
						{{ hourseStr.buildDistrictCode }}-{{ hourseStr.buildTowerCode }}-{{
							hourseStr.roomUnitNumber
						}}-{{ hourseStr.roomCode }}
						<div v-show="housingFlag && hourseList.length > 1" class="index_resi_quar_cont_title_right"
							@click="estate">
							<span style="font-size: 14px">切换房屋</span>
						</div>
					</view>
					<view class="u-p-30" v-if="housingFlag" style="display: flex; justify-content: space-between">
						<!-- <view class="u-m-b-20" >
 							<text style="color: #333;width:144rpx;display: inline-block;" class="u-font-28">
 								房间号
 							</text>
 							<text style="color: #666666;display: inline-block" class="u-font-28 u-flex-1">
 								{{hourseStr.buildDistrictCode}}-{{hourseStr.buildTowerCode}}-{{hourseStr.roomUnitNumber}}-{{hourseStr.roomCode}}
 							</text>
 						</view> -->
						<view class="u-m-b-20" style="margin-left: 8px">
							<text style="
									color: #999999;
									width: 80px;
									display: inline-block;
									font-size: 16px;
									font-weight: 600;
								" class="u-font-28">
								业主姓名：
							</text>
							<text style="color: #666666; display: inline-block; font-size: 16px; font-weight: 600"
								class="u-font-28 u-flex-1">
								{{ ownerName }}
							</text>
						</view>
						<view class="u-m-b-20" style="margin-right: 8px">
							<text style="
									color: #999999;
									width: 50px;
									display: inline-block;
									font-size: 16px;
									font-weight: 600;
								" class="u-font-28">
								面积：
							</text>
							<text style="color: #666666; display: inline-block; font-size: 16px; font-weight: 600"
								class="u-font-28 u-flex-1">
								{{ hourseStr.roomAreaOfStructure }}平方米
							</text>
						</view>
						<!-- <view class="u-m-b-20">
 							<text style="color: #333;width:144rpx;display: inline-block" class="u-font-28">
 								物业费：
 							</text>
 							<text style="color: #666666;display: inline-block" class="u-font-28 u-flex-1">
 								{{hourseStr.wuYePrice?hourseStr.wuYePrice+'/'+'平方米/'+(hourseStr.costsPeriodUnit==1?'年':hourseStr.costsPeriodUnit==2?'半年':hourseStr.costsPeriodUnit==3?'季度':'月'):'未设置'}}
 							</text>
 						</view> -->
						<!-- <view class="u-m-b-20">
 							<text style="color: #333;width:144rpx;display: inline-block" class="u-font-28">
 								项目名称：
 							</text>
 							<text style="color: #666666;display: inline-block" class="u-font-28 u-flex-1">
 								{{hourseStr.proName}}
 							</text>
 						</view>
 						<view class="u-m-b-20">
 							<text style="color: #333;width:144rpx;display: inline-block" class="u-font-28">
 								地址：
 							</text>
 							<text style="color: #666666;display: inline-block" class="u-font-28 u-flex-1">
 								{{hourseStr.city}}-{{hourseStr.district}}
 							</text>
 						</view> -->

						<!-- <view style="width: 20%;margin: 15px auto;cursor: pointer;">
 							<text style="color: #007AFF;" @click="newly()">房屋详情</text>
 						</view> -->
					</view>
					<view class="index_resi_quar_cont_cent" v-else>
						<view class="index_resi_quar_cont_cent_txt">为了更好的用户体验，请先认证房产</view>
						<view class="index_resi_quar_cont_cent_btn">
							<button @click="renBtn" type="primary">业主认证</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="repair-wrap">
			<view style="border-top: 1px solid #f7f8f9; background-color: #ffffff; margin-top: 10px; width: 92vw">
				<view style="width: 88%; margin: auto">
					<view class="header-li" v-for="(item, index) in inform" :key="index">
						<view @click="clickMenu(item)">
							<image class="image" :src="item.imgUrl"></image>
							<view class="selected">{{ item.name }}</view>
							<image class="imageRight" src="../../static/image/right.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subTitle: '2020-05-15',
				show: false,
				housingFlag: false,
				hourseList: null,
				hourseStr: null,
				hourseNum: 0, //选择第几个房间,
				bol: false, //弹窗
				PopupList: [],
				index: 0,
				type: 1,
				array: ['分类', '分类二'],
				ruleForm: {
					renType: null
				},
				indexList: true,
				ownerName: null,
				isShowThree: false,
				inform: [{
						id: 1,
						name: '业主信息',
						imgUrl: '../../static/image/user@2x.png',
						inkUrl: '/pages/information/ownerinformation'
					},
					{
						id: 2,
						name: '家人信息',
						imgUrl: '../../static/image/team@2x.png',
						inkUrl: '/pages/information/familyList'
					},
					{
						id: 3,
						name: '宠物信息',
						imgUrl: '../../static/image/chongwu@2x.png',
						inkUrl: '/pages/information/informationPetlist'
					},
					{
						id: 4,
						name: '车辆信息',
						imgUrl: '../../static/image/auto@2x.png',
						inkUrl: '/pages/information/vehicleinformationList'
					},
					{
						id: 5,
						name: '租户信息',
						imgUrl: '../../static/image/id card@2x.png',
						inkUrl: '/pages/rentsale/tenantList'
					},
					{
						id: 6,
						name: '服务记录',
						imgUrl: '../../static/image/solution@2x.png',
						inkUrl: '/pages/information/serviceIndex'
					},
					{
						id: 7,
						name: '过户记录',
						imgUrl: '../../static/image/copy@2x.png',
						inkUrl: ''
					}
				]
			}
		},
		onLoad() {
			// this.bol = !this.bol
			this.checkLogin()
		},
		async onShow() {
			// this.checkLogin()
		},
		onPullDownRefresh() {
			this.checkLogin()
		},
		methods: {
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							})
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName
							_this.address =
								_this.homelist.buildDistrictCode +
								'-' +
								_this.homelist.buildTowerCode +
								'-' +
								_this.homelist.roomUnitNumber +
								'-' +
								_this.homelist.roomCode;
							(this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]),
							(this.name = this.homelist.proName)
							// _this.serviceRecord()
							let res = this.$request.api.address({})
							// console.log(console.log(res))
							this.login()
							this.hourseNum = uni.getStorageSync('hourseNum') || 0
							// this.housingFlag = false //可能和业主认证业务有关
							if (uni.getStorageSync('loginFlag')) {
								this.getHouseList()
								this.ownerName = uni.getStorageSync('projectItem').ownerName
							}
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						})
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					})
				}
				uni.stopPullDownRefresh()
			},
			newly() {
				uni.navigateTo({
					url: '/pages/information/informationindex'
				})
			},
			downBtn() {
				//应用宝链接
				// location.href='https://a.app.qq.com/o/simple.jsp?pkgname=uni.UNI21DD88C'
				//华为市场链接
				location.href =
					'https://appgallery.huawei.com/app/C104867875?sharePrepath=ag&locale=zh_CN&source=appshare&subsource=C104867875&shareTo=weixin&shareFrom=appmarket'
				//vivo链接
				//https://h5coml.vivo.com.cn/h5coml/appdetail_h5/browser_v2/index.html?appId=3319176&resource=301&source=2
			},
			//淘宝链接
			toLink() {
				// #ifdef H5
				window.open(
					'https://item.taobao.com/item.htm?spm=a230r.1.14.1.79c116cdEAqC10&id=661953804169&ns=1&abbucket=15#detail'
				)
				// #endif
				plus.runtime.openURL(
					'https://item.taobao.com/item.htm?spm=a230r.1.14.1.79c116cdEAqC10&id=661953804169&ns=1&abbucket=15#detail',
					function(res) {
						console.log(res)
					}
				)
			},
			//获取房屋信息
			async getHouseList() {
				uni.showLoading({
					title: '加载中'
				})
				let res = await this.$request.api.house({
					mobile: uni.getStorageSync('phone')
				})
				console.log(123123)
				//查询是否存在自己租的房屋
				let res2 = await this.$request.api.getProByMobile({
					mobile: uni.getStorageSync('phone') || this.phone
				})
				console.log(res2)
				// console.log(res, uni.getStorageSync('phone'))
				if (res.data.data.projectList.length > 0) {
					this.hourseList = res.data.data.projectList
					this.hourseStr = this.hourseList[this.hourseNum]
					uni.setStorageSync('hourseList', res.data.data.projectList)
					console.log('有房屋列表')
					// uni.showModal({
					// 	title: '停水通知',
					// 	content: '尊敬的王某某\n撒娇看见啊还是看的啊那看见你的看书看见那看见那看看看看见看点看点看看见那看你卡技能看看看点看 \n特此通知\n2020年1月3日\n通知人（赵飞）',
					// 	showCancel: false,
					// 	confirmText: '已读',
					// 	confirmColor: '#F9A832',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 		}
					// 	}
					// });
					this.housingFlag = true
				} else if (res2.data.data.projectList.length > 0) {
					this.hourseList = res2.data.data.projectList
					this.hourseStr = this.hourseList[this.hourseNum]
					uni.setStorageSync('hourseList', res2.data.data.projectList)
					console.log('有房屋列表')
					// uni.showModal({
					// 	title: '停水通知',
					// 	content: '尊敬的王某某\n撒娇看见啊还是看的啊那看见你的看书看见那看见那看看看看见看点看点看看见那看你卡技能看看看点看 \n特此通知\n2020年1月3日\n通知人（赵飞）',
					// 	showCancel: false,
					// 	confirmText: '已读',
					// 	confirmColor: '#F9A832',
					// 	success: function(res) {
					// 		if (res.confirm) {
					// 		}
					// 	}
					// });
					this.housingFlag = true
				} else {
					this.housingFlag = false
				}
				uni.hideLoading()
				if (this.hourseList != '') {
					this.isShowThree = true
				} else {
					this.isShowThree = false
				}
			},
			//获取openId
			login() {
				let _this = this
				// 检查登录状态是否过期
				// uni.checkSession({
				// 	fail: res => {
				// uni.login({
				// 	provider: 'weixin',
				// 	success: loginRes => {
				// 		uni.setStorageSync('code', loginRes.code);
				// 		_this.$request.api.login({
				// 			code: loginRes.code
				// 		}).then(res => {
				// 			uni.setStorageSync('openId', res.data.data.data.openId);
				// 			uni.setStorageSync('sessionKey', res.data.data.data.sessionKey);
				// 		});
				// 	}
				// })
				// 	}
				// })
			},
			// 切换房屋
			estate() {
				this.$Router.push({
					path: '/pages/switch/switch'
				})
			},
			// 业主认证
			renBtn() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						_this.$Router.push({
							path: '/pages/address/address'
						})
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						})
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					})
				}
			},
			checked(index) {
				this.isActive = index
			},
			clickMenu(val) {
				console.log(val, '+++++++++++++')
				uni.navigateTo({
					url: val.inkUrl
				})
				if (val.id == 7) {
					let roomId = null
					if (this.hourseStr) {
						roomId = this.hourseStr.roomId
					}
					uni.navigateTo({
						url: '/pages/information/transferRecord?roomId=' + roomId
					})
				}
			},
			shouList() {
				this.indexList = !this.indexList
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f4f4f4;
	}

	.title {
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		font-weight: 500;
		color: #333333;
		line-height: 41px;
		position: relative;
	}

	.title_btm {
		position: absolute;
		width: 79px;
		height: 6rpx;
		// background: #578ae2;
		opacity: 0.6;
		border-radius: 6px;
		bottom: 4rpx;
		left: 6rpx;
		background: linear-gradient(70deg, #447a05, rgba(69, 124, 5, 0.1));
	}

	.u-m-b-20 {
		margin-bottom: 20px !important;
	}

	.rect {
		width: 80%;
		height: auto;
		background-color: #ffffff;
	}

	.index_wrap {
		width: 100vw;
		height: auto;
		overflow: hidden;
	}

	.index_wrap .a {
		width: calc(100vw - 60rpx);
		margin: 0 auto 20rpx;
		height: 36vw;
		border-radius: 6px;
		overflow: hidden;
	}

	.index_wrap .a .swiper_img {
		width: 100%;
	}

	.index_wrap .index_btom {
		width: 100vw;
		height: 120px;
		overflow: hidden;
	}

	.index_wrap .index_resi_quar {
		width: 100vw;
		height: 140px;
		position: relative;
	}

	.index_wrap .index_resi_quar .index_resi_quar_box {
		width: 100vw;
		height: 120rpx;
		background: #f1f1f1;
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		position: absolute;
		top: 20rpx;
		left: 15px;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0px 3px 20px 0px rgba(51, 51, 51, 0.1);
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_title {
		width: calc(100% - 40rpx);
		height: 57px;
		margin: auto;
		border-bottom: 1px solid #ddd;
		font-size: 36rpx;
		font-weight: 550;
		color: #333;
		line-height: 59px;
		position: relative;
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_title .index_resi_quar_cont_title_right {
		color: #2986ff;
		float: right;
		position: absolute;
		right: 16rpx;
	}

	.index_wrap .index_btom .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent {
		width: 100%;
		height: calc(100% - 91rpx);
		overflow: hidden;
	}

	.index_wrap .index_btom .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent .index_resi_quar_cont_cent_txt {
		width: 100%;
		height: auto;
		text-align: center;
		margin: 70rpx 0 0;
	}

	.index_wrap .index_btom .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent .index_resi_quar_cont_cent_btn {
		width: 370rpx;
		height: 90rpx;
		margin: 40rpx auto 0;
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent .index_resi_quar_cont_cent_btn button {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #76d904 0%, #417505 100%);
		line-height: 90rpx;
		border-radius: 50rpx;
	}

	.index_wrap.index_resi_quar2 {
		width: 100%;
		height: auto;
		min-height: 60rpx;
		background: #fbfbfb;
	}

	.index_wrap .index_resi_quar2 .index_resi_quar2_gg {
		width: calc(100% - 60rpx);
		height: 250rpx;
		margin: 60rpx auto 60rpx;
	}

	.index_wrap .index_resi_quar2 .index_resi_quar2_gg image {
		width: 100%;
		height: 100%;
	}

	.repair-wrap {
		width: 100%;

		height: auto;
		background: #f4f4f4;
		overflow: hidden;
		padding: 0 16px;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.header-li {
		// display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 70px;
		color: #333333;
		border-bottom: 1rpx solid #eeeeee;
	}

	.header-li .image {
		width: 21px;
		height: 23px;
		float: left;
		margin-top: 23px;
		margin-right: 10px;
	}

	.header-li .imageRight {
		width: 10px;
		height: 12px;
		float: right;
		margin-top: -42px;
	}

	.header-name {
		width: 186rpx;
	}

	.images {
		width: 6px;
		height: 8px;
	}

	.images1 {
		width: 6px;
		height: 8px;
	}

	.images2 {
		width: 6px;
		height: 8px;
	}

	.images3 {
		width: 6px;
		height: 8px;
	}

	.index_resi_quar_cont_title i {
		width: 6px;
		height: 16px;
		background: linear-gradient(180deg, #76d904 0%, #417505 100%);
		border-radius: 4px;
		display: inline-block;
		vertical-align: middle;
		margin-top: -4px;
		margin-right: 12px;
		margin-left: 14px;
	}

	.selected {
		font-size: 17px;
	}
</style>